<template>
    <div>
        <h4>路由的配置</h4>
        <ul>
            <li>
                路由功能配置 【 let router = createRouter({}) 】
                <ol>
                    <li>
                        history:路由模式配置选项【hash模式、history模式】
                        <ul>
                            <li>vue模块化项目页面切换，是通过URL地址模拟的路径变化完成组件选择渲染【页面不刷新】</li>
                            <li>vue模块化项目的URL地址变化，必须选择JS不会触发页面刷新的技术完成【hash锚点、history.pushState历史路径更新】</li>
                            <li>vue的路由模块提供模式切换方法 createWebHashHistory(base) , createWebHistory(base) => base 项目的部署路径地址【vue.config.js 中的publicPath】</li>
                            <li>vue路由提供导航组件RouterLink，和封装的动态路由显示组件RouterView是可以根据路由配置模式选择不同的操作方案</li>
                            <li>
                                vue路由使用历史模式时，会在生产环境下造成页面刷新404的问题 <br>
                                该问题主要是服务器无法有效识别路径中那部分是项目路径，那部分是路由路径导致的 <br>
                                通过设置路由配置，和服务器配置完成问题处理<br>
                                历史模式在生产环境下重置路径地址可以通过 配置 base项目部署路径解决 => history:createWebHistory( process.env.BASE_URL ) <br>
                                服务器配置[koa2服务器为例][其它服务器：https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%85%8D%E7%BD%AE%E7%A4%BA%E4%BE%8B] <br>
                                <pre>
                                    const { historyApiFallback } = require('koa2-connect-history-api-fallback');

                                    const app=new Koa();

                                    // vue-router历史模式兼容服务插件必须定义在所有服务器静态资源之前
                                    //      服务器的请求资源不是只有vue项目一个，还包含其它静态资源和数据接口等
                                    //      历史模式的兼容插件必须准确设置 vue 项目的入口html文件，和被操作的项目目录
                                    //      并通过白名单方式完成其它非vue项目的路径放行
                                    app.use( historyApiFallback({
                                        // index 用于配置 vue 项目的入口html文件
                                        // index的路径是以服务器路径为参考的 => http://127.0.0.1:3002/wbs22062-web/index.html
                                        index:"/wbs22062-web/index.html",
                                        // 访问路径判断重写，定义放行白名单
                                        rewrites:[
                                            {
                                                // 路径判断依据
                                                // 通过正则拦截符合条件的请求，经过to配置进行地址转换
                                                from:new RegExp("^(?!(/wbs22062-web/)).*"), 
                                                // 重写返回路径
                                                to:function(content){
                                                    // 将访问路径直接向下进行服务器执行
                                                    return content.parsedUrl.path
                                                }
                                            }
                                        ]
                                    }) );
                                </pre>

                            </li>
                        </ul>
                    </li>
                    <li>linkActiveClass:"router-link-active" => 自定义 RouterLink 组件在页面操作时的路由激活样式名称</li>
                    <li>linkExactActiveClass:"router-link-exact-active"  => 自定义 RouterLink 组件在页面操作时的路由激活样式名称</li>
                    <li>scrollBehavior:页面滚动条行为控制【 在页面切换过程中操作浏览器滚动条的滚动行为 】【 只能在支持历史模式的浏览器中生效 】</li>
                    <!-- API手册或者开发工具中 <> 表示泛型 => 泛指数据类型 -->
                    <li>
                        routes:取值Array＜RouteRecordRaw＞,RouteRecordRaw类型数据是vue-router提供的路由映射对象
                    </li>
                </ol>
            </li>
            <li>
                路由表配置:RouteRecordRaw 【 【 let router = createRouter({ routes:[] }) 】 】
                <ol>
                    <li>
                        path:自定义路由组件地址
                        <pre>
                        a. 一级路由地址必须以 / 方式描述，表示该路径为vue路由的最顶层地址路径
                        b. 其它级别的地址可以使用 以/开头的绝对地址模式，或者不以/开头的相对地址模式
                            + 以/开头的绝对地址模式 => 子路由提供独立的导航地址，访问该地址时 类似于从服务器根目录中加载该组件
                            + 不以/开头的相对地址模式 => 子路由只提供自己的相对URL地址，访问该地址时，必须先访问父路由地址
                        c. 默认路由访问地址 ：一级路由path取值 "/" , 其它级别路由path取值 ""
                            + 其它级别路由定义 / 是不能被识别为默认地址的，所以其它级别路由的默认地址取值为 ""
                        d. 剩余地址匹配取值 ：依据正则规则定义的正则标表达式  (.*)* ,该表达式的地址会在访问路径不属于路由表配置地址时进行匹配生效
                            + 同时为了满足路由表 path 取值的规则，并能提供组件对未知地址的展示要求，该正则需要提供固定的变量描述名称 /:变量名(.*)*
                        </pre>
                    </li>
                    <li>name:自定义路由组件的唯一名称，该名称可用于导航对象模式的具名路由切换，但该名称不会在项目中显示出现,此时path地址可以随意更新,可忽略路由层级</li>
                    <li>
                        component:地址对应的页面组件(路由组件) <br>
                        <ul>
                            <li>
                                路由组件常规模式
                                <pre>
                                    import DefaultPage from "@/pages/DefaultPage.vue";
                                    { path:"/default",component:DefaultPage },
                                </pre>
                            </li>
                            <li>
                                路由懒加载导入：在组件定义时提供特殊的导入方法，基于该方法导入的组件可以被分解成多个JS文件，减少首次页面加载时的文件大小 <br>
                                component 取值方法，返回vue提供的 import(vue组件地址) 方法 <br>
                                import() 方法通过定义vue组件文件地址，实现文件的分解 <br>
                                并可以通过 形参注释  /* webpackChunkName:"变量名" */ 描述文件名称和分解方案 <br> 
                                <pre>
                                    { path:"/error",component: () => import( /* webpackChunkName:"base" */ "@/pages/ErrorPage.vue" ) },
                                </pre>
                            </li>
                        </ul>

                    </li>
                    <li>
                        redirect:路由路径重定向,当浏览器访问的某个路由地址配置了redirect，vue路由会自动切换到redirect地址上<br>
                        redirect 和 component 配置不会同时定义在一个路由配置上 <br>
                        redirect 不具有相对路由地址的路径自动拼接操作，定义时必须提供完成路径地址
                    </li>
                    <li>children:Array＜RouteRecordRaw＞ 子路由定义和描述</li>
                    
                </ol>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>

</style>